<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";

.mid {
    line-height: 140px;
}

.active {
    color: red;
}

.right-menu {
    top: 50px !important;
}

.el-checkbox {
    display: block;
    text-align: left;
    border: 1px solid #666;
    height: 40px;
    line-height: 40px;
    margin-left: 0;
    padding-left: 30px;
    margin-right: 30px;
}

.tac {
    text-align: center;
    padding: 0;
    background: #ccc;
}

.no-border {
    border: none;
    position: absolute;
    right: 5px;
    top: 6px;
}

.fixed-height {
    height: 400px;
    overflow-y: scroll;
}

.dia-button {
    text-align: right;
    margin-bottom: 0 !important;
}

.el-icon-close {
    margin-left: 10px;
}
.name-limit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}
</style>
<template>
<div class="app-container calendar-list-container">
  <div class='pds-tip'>
    <el-form :inline="true" class="filter">
      <el-form-item label="">
        <el-cascader :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="filter.productCategoryCodeList" @change="changeCategory"></el-cascader>
      </el-form-item>
      <el-form-item label="">
        <el-select placeholder="产品状态" v-model="filter.productStatusDv" clearable>
          <el-option v-for="option in filter.options.prod_file_pro_status" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select placeholder="经营模式" v-model="filter.bizModelDv" clearable>
          <el-option v-for="option in filter.options.prod_file_biz_model" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select placeholder="销售区域" v-model="filter.salesAreaDv" clearable>
          <el-option v-for="option in filter.options.prod_file_sales_area" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select placeholder="市场定位" v-model="filter.marketPositionDv" clearable>
          <el-option v-for="option in filter.options.prod_file_market_pos" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select placeholder="客户" v-model="filter.customerIds" filterable remote reserve-keyword :remote-method="getPdsCustomerByName" clearable>
          <el-option v-for="option in customerList" :key="option.value" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input style="width: 200px;" class="filter-item" placeholder="请输入产品名称或型号" v-model="filter.key">
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button class="filter-item" type="success" icon="search" @click="search()">查询</el-button>
        <el-button class="filter-item" type="info" icon="search" @click="dialogFormVisible=true">高级查询</el-button>
        <el-button class="filter-item" type="warning" icon="search" @click="$router.push({path:'list/model/compare'})">产品对比
        </el-button>
        <el-button type="primary" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <custom-card title="已选查询条件" v-if="filterSetting.basicCheckedList.length||filterSetting.moduleCheckedList.length">
    <el-button type="primary" plain v-for="(item,index) in filterSetting.basicCheckedList.concat(filterSetting.moduleCheckedList)" :key="index">{{language=='en'?item.labelEnUs:item.labelZhCh}}:{{item.value}}
      <i class="el-icon-close" @click="deleteFileterItem(index,item.classTypeEn)"></i>
    </el-button>
    <!-- <el-button type="primary" plain v-for="item in filterSetting.moduleCheckedList" :key="item.name">{{language=='en'?item.paramNameEn:item.paramNameCn}}:{{item.value}}<i class="el-icon-close"></i></el-button> -->

  </custom-card>
  <el-row class="">
    <el-col :span="3">
      <div class="prod-lable" v-for="(item,idx) in ['机型号','产品图片','产品名称','市场定位','经营模式','认证','上市年份','内盒类型','客户']" :class="{'mid':idx==1}" :key="idx">
        {{item}}
      </div>
    </el-col>
    <el-col :span="21">
      <div class="prod-list-scoll">
        <div class="prod-item" v-for="(prod,odx) in pageData.list" :key="odx">
          <div class="prod-lable" v-for="(item,idx) in ['plmModelNo','pdsFileModelPbsPics','name','marketPositionDv','bizModelDv','certsDvs','salesYear','innerCartonType','customers']" :key="idx">
            <el-button type="text"  :title="prod[item]" name="" v-if="idx==0" :class="{active:prod.isActive&&idx==0}" @click="pageByModel(odx)">{{prod[item]}}
            </el-button>
            <el-button icon="el-icon-search" size="mini" v-if="idx==0" @click="showMenu(odx)" class="no-border"></el-button>
            <div v-if="idx>1" :title="prod[item]" class="name-limit">{{prod[item]}}</div>
            <img :src="baseImgUrl+prod[item][0].url" alt="" v-if="idx==1" class="prod-img">
          </div>
          <div class="right-menu" v-if="prod.showMenu" @click="prod.showMenu=false">
            <div @click="$router.push({path:'list/model/detail',query:{modelPbsId:prod.id}})">查看档案详情</div>
            <div @click="$router.push({path:'/product/archives/model/addTrans',query:{plmModelNoMain:prod.plmModelNo}})">
              新建衍生型号
            </div>
            <div @click="$router.push({path:'/sale/model/add',query:{plmModelNoMain:prod.plmModelNo}})">新建客户货号</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <custom-card title="衍生型号" class="mt-20">
    <el-table :data="pageDataModel.list" border style="width: 100%">
      <el-table-column label="机型号" prop="plmModelNo">
        <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showCusModel(scope.$index)" :class="{'active':scope.row.isActive}">{{scope.row.plmModelNo}}
            </el-button>
          </template>
      </el-table-column>
      <el-table-column prop="name" label="产品名称">
      </el-table-column>
      <el-table-column prop="customer" label="客户名称">
      </el-table-column>
      <el-table-column prop="diffRemark" label="差异描述">
      </el-table-column>
      <el-table-column prop="productStatusDv" label="产品状态">
      </el-table-column>
      <el-table-column prop="" label="操作" fixed="right">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="$router.push({path:'/sale/model/add',query:{plmModelNoMain:scope.row.plmModelNo}})">新建货号
            </el-button>
            <el-button type="success" size="mini" @click="$router.push({path:'/product/list/model/detail',query:{modelPbsId:scope.row.id}})">查看
            </el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container pds-pagination">
      <pagination :pageData="pageDataModel.params" @pageChange="handlePageChanged" @changeSize="handleSizeChange"></pagination>
    </div>
  </custom-card>
  <custom-card title="机型全码" class="mt-20">
    <el-table :data="pageDataCus.list" border style="width: 100%">
      <el-table-column label="机型全码" min-width="10%" prop="customerModel">
      </el-table-column>
      <el-table-column label="客户名称" min-width="30%" prop="customerShortName">
      </el-table-column>
      <el-table-column prop="" label="包装要求" min-width="20%">
      </el-table-column>
      <el-table-column label="其他说明" min-width="50%" prop="remark">
      </el-table-column>
      <el-table-column prop="" label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
            <el-button type="success" size="mini" @click="$router.push({path:'/sale/model/detail',query:{modelPbsId:scope.row.id}})">查看
            </el-button>
          </template>
      </el-table-column>
    </el-table>
    <pagination :pageData="pageDataCus.params" @pageChange="handlePageChangedCus" @changeSize="handleSizeChangeCus"></pagination>
  </custom-card>
  <el-dialog title="高级查询" :visible.sync="dialogFormVisible" width="80%">
    <custom-card title="基本查询条件">
      <template>
          <div class="pds-tip-green">
            <p>
              <el-cascader :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="filter.productCategoryCodeList" @change="changeCategory"></el-cascader>
              <el-select placeholder="标准" v-model="filter.standard">
                <el-option v-for="option in [{labelEnUs:'EnStandard',labelZhCh:'欧标',value:1},{labelEnUs:'UsStandard',labelZhCh:'美标',value:2}]" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
                </el-option>
              </el-select>
              <el-select placeholder="产品状态" v-model="filter.productStatusDv">
                <el-option v-for="option in filter.options.prod_file_pro_status" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
                </el-option>
              </el-select>

              <el-select placeholder="经营模式" v-model="filter.bizModelDv">
                <el-option v-for="option in filter.options.prod_file_biz_model" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
                </el-option>
              </el-select>
              <el-select placeholder="销售区域" v-model="filter.salesAreaDv">
                <el-option v-for="option in filter.options.prod_file_sales_area" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
                </el-option>
              </el-select>
              <el-select placeholder="市场定位" v-model="filter.marketPositionDv">
                <el-option v-for="option in filter.options.prod_file_market_pos" :key="option.id" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.value">
                </el-option>
              </el-select>
              <el-select placeholder="客户" v-model="filter.customerIds" filterable remote reserve-keyword :remote-method="getPdsCustomerByName" clearable>
                <el-option v-for="option in customerList" :key="option.value" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.id">
                </el-option>
              </el-select>
            </p>
          </div>
        </template>
    </custom-card>
    <custom-card title="高级查询条件">
      <div style="margin-top:2px">
        <el-row class="">
          <el-col :span="8">
            <div class="pds-tip-green">
              <p>
                待选查询字段
              </p>
            </div>
            <div class="fixed-height">
              <div class="el-checkbox tac">
                {{language=='en'?'basicAttr':'基础属性'}}
              </div>
              <el-checkbox-group v-model="filterSetting.basicCheckedList">
                <el-checkbox v-for="option in filterSetting.basicList" :label="option" :key="option.name">
                  {{language=='en'?option.labelEnUs:option.labelZhCh}}
                </el-checkbox>
              </el-checkbox-group>

              <div class="module-item" v-for="(muduleItem,odx) in modulesList" :key="muduleItem.id">
                <div class="el-checkbox tac" @click="getPdsConfModulePrams(muduleItem.id,odx)">
                  {{language=='en'?muduleItem.itemNameEn:muduleItem.itemNameCn}}
                </div>
                <el-checkbox-group v-model="filterSetting.moduleCheckedList">
                  <el-checkbox v-for="option in muduleItem.paramsList" :label="option" :key="option.id">
                    {{language=='en'?option.paramNameEn:option.paramNameCn}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

          </el-col>
          <el-col :span="16">
            <div class="pds-tip-green">
              <p>
                已选查询字段
              </p>
            </div>
            <div class="fixed-height">
              <el-table border :data="filterSetting.basicCheckedList.concat(filterSetting.moduleCheckedList)">
                <el-table-column label="序号" min-width="20%">
                  <template slot-scope="scope">
                      {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="classType" label="模块">
                  <template slot-scope="scope">
                      {{language=='en'?scope.row.classTypeEn:scope.row.classTypeCn}}
                    </template>
                </el-table-column>
                <el-table-column label="参数">
                  <template slot-scope="scope">
                      {{language=='en'?scope.row.labelEnUs:scope.row.labelZhCh}}
                    </template>
                </el-table-column>
                <el-table-column label="参数值" prop="plmModelNo">
                  <template slot-scope="scope">
                      <el-radio-group v-model="scope.row.value" v-if="scope.row.paramTypeDv=='radio'">
                        <el-radio v-for="option in [{labelZhCh: '是',labelEnUs: 'Y',value: 1,id: 1},{labelZhCh: '否',labelEnUs: 'N',value: 0,id: 0}]" :key="option.id" :label="option.value">{{language=='en'?option.labelEnUs:option.labelZhCh}}
                        </el-radio>
                      </el-radio-group>
                      <el-input v-else class="" v-model="scope.row.value" placeholder="请输入" width="80%"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="plmModelNo">
                  <template slot-scope="scope">
                      <el-button type="danger" name="el-button" @click="deleteFileterItem(scope.$index,scope.row.classTypeEn)">删除
                      </el-button>
                    </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dia-button">
        <el-button type="warning" size="small" @click="resetForm()">重置</el-button>
        <el-button type="" size="small" @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" size="small" @click="search()">确定</el-button>
      </div>
    </custom-card>
  </el-dialog>
</div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
import * as baseApi from '@/api/common/index';
import * as prodApi from '@/api/product/index';
import * as listApi from '@/api/product/list/index';
import * as saleApi from '@/api/sale/index';

export default {
  name: 'user',
  components: {},
  data() {
    return {
      filter: {
        options: {},
        params: {
          conditionList: [],
          moduleConditionList: [],
        },
        standard: 1
      },
      baseImgUrl: process.env.BASE_FILE_URL + '/',
      filterSetting: {
        basicList: [],
        moduleList: [],
        basicCheckedList: [],
        moduleCheckedList: []
      },
      modulesList: [],
      dialogFormVisible: true,
      customerList: [],
      customerName: '',
      productCategory: [],
      pageData: {
        params: {
          page: 1,
          size: 100,
          variation: 0
        }
      },
      pageDataModel: {
        params: {
          page: 1,
          size: 10,
          variation: 1
        }
      },
      pageDataCus: {
        params: {
          page: 1,
          size: 100
        }
      }
    };
  },
  created() {
    this.getDict();
    this.getPdsConfCategoryTree();
    this.listPbsAdvancedQuery();
    this.search();
  },
  watch: {
    'filter.standard' (val) {
      if (this.filter.productCategoryCodeList && this.filter.productCategoryCodeList.length == 3) {
        this.getPdsConfModule(this.filter.productCategoryCodeList[2]);
      }
    }
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    showMenu(index) {
      if (this.pageData.list[index].showMenu == true) {
        this.$set(this.pageData.list[index], 'showMenu', false);
        return;
      }
      this.pageData.list.forEach((value, key) => {
        this.$set(this.pageData.list[key], 'showMenu', false);
        value.showMenu = false;
      });
      this.$set(this.pageData.list[index], 'showMenu', true);
    },
    setActiveModel(idx, acList, list) {
      if (acList && acList.length) {
        acList.map(row => {
          row.isActive = false;
        });
      }
      if (list && list.length) {
        list.map(row => {
          row.isActive = false;
        });
      }
      acList[idx].isActive = true;
      console.log('acList', acList);
    },
    getPdsCustomerByName(val) {
      if (val !== '') {
        saleApi
          .getPdsCustomerByName({
            customerName: val
          })
          .then(res => {
            res.data.map(row => {
              row.labelEnUs = row.shortName;
              row.labelZhCh = row.shortName;
              row.value = row.code;
            });
            this.customerList = res.data;
          });
      }
    },
    search() {
      // this.pageData.params = Object.assign(this.pageData.params, this.filter);
      // if (this.filter.productCategoryCodeList) {
      //   this.pageData.params.productCategoryId = this.filter.productCategoryCodeList[
      //     this.filter.productCategoryCodeList.length - 1
      //   ];
      // }
      // this.pageData.params.productCategoryCodeList = [];
      // this.pageData.params.options = "";
      // listApi.page(this.pageData.params).then(res => {
      //   this.$set(this.pageData, "list", res.data.rows);
      // });
      this.filterSetConfirm();
      this.filter.params.page = this.pageData.params.page;
      this.filter.params.size = this.pageData.params.size;
      listApi.page(this.filter.params).then(res => {
        this.$set(this.pageData, 'list', res.data.rows);
      });
      this.pageDataModel = {
        params: {
          page: 1,
          size: 10,
          variation: 1
        }
      };
      this.pageDataCus = {
        params: {
          page: 1,
          size: 100
        }
      };
    },
    pageByModel(idx) {
      if (idx > -1) {
        this.setActiveModel(idx, this.pageData.list, this.pageDataModel.list);
        this.pageDataModel.params.plmModelNo = this.pageData.list[
          idx
        ].plmModelNo;
        this.pageDataCus.params.plmModelNo = this.pageData.list[idx].plmModelNo;
      }
      this.pageDataModel.params.limit = this.pageDataModel.params.size;

      listApi.pageByModel(this.pageDataModel.params).then(res => {
        if (res.data.rows.length) {
          res.data.rows.map(row => {
            row.isActive = false;
          });
        }
        console.log('pageDataModel', this.pageDataModel);
        this.$set(this.pageDataModel, 'list', res.data.rows);
        this.$set(this.pageDataModel.params, 'total', res.data.total);
      });
      this.pageModelCus();
    },
    showCusModel(index) {
      this.setActiveModel(index, this.pageDataModel.list, this.pageData.list);
      this.pageDataCus.params.plmModelNo = this.pageDataModel.list[
        index
      ].plmModelNo;
      this.pageModelCus();
    },
    pageModelCus() {
      listApi.pageModelCus(this.pageDataCus.params).then(res => {
        this.$set(this.pageDataCus, 'list', res.data.rows);
        this.$set(this.pageDataCus.params, 'total', res.data.total);
      });
    },
    // 获取字典选项
    getDict() {
      const codes =
        'prod_file_sales_area,prod_file_pro_status,prod_file_biz_model,prod_file_sales_area,prod_file_market_pos';
      baseApi.getTypesValue(codes).then(res => {
        this.filter.options = res.data;
      });
    },
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        console.log('getPdsConfCategoryTree', res);
        this.productCategory = res.data;
      });
    },
    handleSizeChange(val) {
      console.log('handleSizeChange', val);
      this.pageDataModel.params.size = val;
      this.pageDataModel.params.page = 1;
      this.pageByModel();
    },
    handlePageChanged(val) {
      this.pageDataModel.params.page = val;
      this.pageByModel();
    },
    handleSizeChangeCus(val) {
      console.log('handleSizeChange', val);
      this.pageDataCus.params.size = val;
      this.pageDataCus.params.page = 1;
      this.pageModelCus();
    },
    handlePageChangedCus(val) {
      this.pageDataCus.params.page = val;
      this.pageModelCus();
    },
    // 高级查询-基础信息
    listPbsAdvancedQuery() {
      listApi.listPbsAdvancedQuery(null).then(res => {
        res.data.map(row => {
          row.classTypeCn = '基础属性';
          row.classTypeEn = 'basicAttr';
        });
        res.data = res.data.filter(value => value.name != 'marketPositionDv');
        this.filterSetting.basicList = res.data;
      });
    },
    changeCategory() {
      console.log('changeCategory');
      if (this.filter.productCategoryCodeList.length === 3) {
        this.getPdsConfModule(this.filter.productCategoryCodeList[2]);
      }
    },

    // 获取模组参数
    getPdsConfModulePrams(itemId, idx) {
      itemId = itemId || this.modulesList[idx].itemId;
      if (this.modulesList[idx].paramsList) {
        return;
      }
      prodApi
        .pdsConfModulePrams({
          itemId
        })
        .then(res => {
          if (res.code == 200) {
            // this.modulesList[idx].paramsList = res.data;
            res.data.map(row => {
              row.classTypeCn = this.modulesList[idx].itemNameCn;
              row.classTypeEn = this.modulesList[idx].itemNameEn;
              row.labelEnUs = row.paramNameEn;
              row.labelZhCh = row.paramNameCn;
            });
            this.$set(this.modulesList[idx], 'paramsList', res.data);
          } else {
            this.$message.error(res.message);
          }
          console.log('777', this.modulesList);
        });
    },
    // 根据产品小类获取模组信息
    getPdsConfModule(categoryId) {
      if (this.filter.productCategoryCodeList && this.filter.productCategoryCodeList.length == 3) {
        prodApi
          .pdsConfModule({
            categoryId,
            standard: this.filter.standard
          })
          .then(res => {
            if (res.code == 200) {
              this.modulesList = res.data;
            } else {
              this.$message.error(res.message);
            }
          });
      }

    },
    // 删除高级查询列表已选参数
    deleteFileterItem(index, type) {
      console.log('deleteFileterItem', index);
      if (type == 'basicAttr') {
        this.filterSetting.basicCheckedList.splice(index, 1);
      } else {
        index = index - this.filterSetting.basicCheckedList.length;
        this.filterSetting.moduleCheckedList.splice(index, 1);
      }
    },
    // 高级查询设置确定
    filterSetConfirm() {
      this.dialogFormVisible = false;
      this.filter.params.conditionList = [];
      this.filter.params.moduleConditionList = [];
      // 设置小类
      if (
        this.filter.productCategoryCodeList &&
        this.filter.productCategoryCodeList.length == 3
      ) {
        this.filter.params.conditionList.push({
          key: 'productCategoryId',
          value: this.filter.productCategoryCodeList[2]
        });
      }
      // 设置下拉筛选等
      const setBasicSelect = name => {
        if (this.filter[name]) {
          this.filter.params.conditionList.push({
            key: name,
            value: this.filter[name]
          });
        }
      };
      setBasicSelect('productStatusDv');
      setBasicSelect('bizModelDv');
      setBasicSelect('salesAreaDv');
      setBasicSelect('marketPositionDv');
      setBasicSelect('key');
      setBasicSelect('customerIds');

      // 设置其他基础参数
      this.filterSetting.basicCheckedList.map(row => {
        this.filter.params.conditionList.push({
          key: row.name,
          value: row.value
        });
      });
      // 设置模组参数
      this.filterSetting.moduleCheckedList.map(row => {
        this.filter.params.moduleConditionList.push({
          key: 'moduleId',
          value: this.modulesList[0].moduleId
        });
        this.filter.params.moduleConditionList.push({
          key: 'itemId',
          value: row.itemId
        });
        this.filter.params.moduleConditionList.push({
          key: 'paramId',
          value: row.id
        });
        this.filter.params.moduleConditionList.push({
          key: 'paramVal',
          value: row.value
        });
      });
      console.log('this.filter.params', this.filter.params);
    },
    // 重置
    resetForm() {
      this.filter.productStatusDv = null;
      this.filter.bizModelDv = null;
      this.filter.salesAreaDv = null;
      this.filter.marketPositionDv = null;
      this.filter.key = null;
      this.filter.customerIds = null;
      this.filter.productCategoryCodeList = [];
      this.filterSetting.basicCheckedList = [];
      this.filterSetting.moduleCheckedList = [];
      this.modulesList = [];
    }
  }
};
</script>
